<template>
  <div class="list-container">
     <div class='topbar clearfix'>
          <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{path:'/userManager/userManager'}">用户管理</el-breadcrumb-item>
              <el-breadcrumb-item>用户列表</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="fr topRight">
                <div class="seach clearfloat">
                  <el-input v-model="seachName" @keyup.native.enter="seachClick" style="float:left;width:60%" placeholder="请输入用户名或手机号进行搜索"></el-input>
                  <div class="seachBtn" @click="seachClick">搜索</div>
                </div>
            </div>
       </div>
       <div class="header">
            <div class="list clearfloat">
              <span>筛选：</span>
              <el-checkbox-group v-model="checkListM" >
                <el-checkbox @change='optionChange()'  :label="item.code" v-for='(item,index) in selectTypeM'>{{item.desc}}</el-checkbox>
              </el-checkbox-group>
              <el-checkbox-group v-model="checkListS" >
                <el-checkbox @change='optionChange()'  :label="item.code" v-for='(item,index) in selectTypeS'>{{item.desc}}</el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="navList clearfix ">
                <span class='fl'>注册日期：</span>
                <div class="fl datePickerUser">
                  <el-date-picker
                    v-model="dateValue"
                    type="daterange"
                    :editable=false
                    @change='dateChange'
                    range-separator="～ "
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </div>
                <span class='fr total'>共{{totalList}}个注册用户</span>
            </div>
       </div>
       <div class="nav">
           <div class="tableHeader clearfloat">
               <div class="tableLi tableHeaderImg">用户基本信息</div>
               <div class="tableLi tableHeaderDetail">性别</div>
               <div class="tableLi tableHeaderOrder">注册日期</div>
               <div class="tableLi tableHeaderStatus">会员到期时间 </div>
               <div class="tableLi tableHeaderDate">手机号</div>
               <div class="tableLi tableHeaderHandle">操作</div>
           </div>
           <ul class="navList clearfloat">
              <li v-if='!navList.length' class='nodata'>暂无数据</li>
               <li v-for="(item,index) in navList" :key="index" v-else>
                   <div class="table clearfloat">
                        <!-- 用户基本信息 -->
                        <div class="tableDiv HeaderImg clearfix" ref="HeaderImg">
                          <img :src="item.headImgUrl" class='fl'/>
                          <span class='userName fl'>{{item.nickName}}</span>
                          <span class='isVip fl' v-if="item.member">会员VIP</span>
                        </div>
                        <!-- 性别 -->
                        <div class="tableDiv HeaderDetail" ref="HeaderDetail">
                             <div class="topList clearfloat">
                                 <h3>{{!item.sex?'未知':item.sex == 1?'男':'女'}}</h3>
                             </div>
                        </div>
                        <!-- 注册日期 -->
                        <div class="tableDiv HeaderOrder" ref="HeaderOrder">{{getTimeDate(item.ctime,'yyyy-MM-dd')}}</div>
                        <!-- 会员到期时间   -->
                        <div class="tableDiv HeaderStatus" ref="HeaderStatus">
                          {{item.memberExpiredTime?getTimeDate(item.memberExpiredTime,'yyyy-MM-dd'):'非会员'}}
                        </div>
                        <!--手机号  -->
                        <div class="tableDiv HeaderDate" ref="HeaderDate">
                            <span>{{item.phone}}</span>
                        </div>
                        <!-- 操作 -->
                        <div class="tableDiv HeaderHandle clearfloat" ref="HeaderHandle">
                            <div class="HandleList" @click.stop="ToDetail(item)">查看详情</div>
                        </div>
                   </div>
               </li>
           </ul>
           <div class="pagination" v-if="total>dataParm.pageSize">
              <el-pagination
                  background
                  :current-page.sync='dataParm.pageNum'
                  @current-change="handleCurrentChange"
                  :page-size="dataParm.pageSize"
                  :pager-count="11"
                  layout="prev, pager, next"
                  :total="total">
              </el-pagination>
            </div>
       </div>
       <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="300px"
        :before-close="handleClose">
        <span>{{dialogContent}}</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="sureBtn()">确 定</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
import api from "@/fetch/url";
import {FormatDate,transformPrice} from '@/utils/index.js'
export default {
  data() {
    return {
       dataParm:{
        keyword:'',
        regTimeStart:'',
        regTimeEnd:'',
        member:'',
        sex:'',
        pageNum:1,
        pageSize:10
       },
       seachName:"",
       navList:[],
       total:0,
       totalList:0,
       dialogVisible:false,
       dialogContent:'',
       checkListM:[],
       selectTypeM:[
        {
          code:1,
          desc:'会员'
        },{
          code:0,
          desc:'非会员'
        }
       ],
       checkListS:[],
       selectTypeS:[
        {
          code:1,
          desc:'男性'
        },{
          code:2,
          desc:'女性'
        },{
          code:0,
          desc:'性别未知'
        }
       ],
       dateValue:'',
    }
  },
  created() {
    this.getCustomerList();
  },
  computed:{
      getTimeDate(){//获取时间戳
        return (time,format)=>{
          if(time){
            return FormatDate(new Date(Number(time)),format)
          }
        }
      },
  },
  mounted() {
    
  },
  methods: {
    optionChange(){
      this.dataParm.member = this.checkListM.join(',');
      this.dataParm.sex = this.checkListS.join(',');
      this.dataParm.pageNum = 1;
      this.getCustomerList();
    },
    dateChange(){
      if(this.dateValue){
         let beginDate =  FormatDate(new Date(Number(this.dateValue[0])),'yyyy-MM-dd');
         let endDate =  FormatDate(new Date(Number(this.dateValue[1])),'yyyy-MM-dd');
         this.dataParm.regTimeStart = beginDate;
         this.dataParm.regTimeEnd = endDate;
      }else{
        this.dataParm.regTimeStart = '';
        this.dataParm.regTimeEnd = '';
      }
      this.dataParm.pageNum = 1;
      this.getCustomerList();
    },
     getCustomerList(){
       api.customerList({...this.dataParm}).then(json=>{
          this.navList = json.list;
          this.total = json.total;
       });
       api.customerCount({}).then(json=>{
          this.totalList = json;
       });
     },
    ToDetail(item){//去编辑
        this.$router.push({
          path:'/project/userManager/userDetail',
          name:'userDetail',
          params:{
              id:item.id,
          },
        });
    },
    handleClose(){
      this.dialogVisible = false;
    },
    sureBtn(){
       
    },
    toastMsg(msg,type){
      this.$message({
        message: msg,
        type: type
      });
    },
    //点击搜索
    seachClick(){
       this.dataParm.pageNum = 1;
       this.dataParm.keyword = this.seachName;
       this.getCustomerList();
    },
     //点击分页触发列表接口
     handleCurrentChange(val) {
       this.dataParm.pageNum = val;
       this.getCustomerList();
     }
  }
}
</script>
<style lang='scss'>
.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
  background-color: #fff;
}
.el-dialog{
    border-radius: 4px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0 !important;
}
.projectNameSelect .el-select-dropdown__item {
   overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
}
  .projectNameSelect  .el-select-dropdown__item.selected{
    color: #FC612A;
  }
  .header{
    .list{
        .el-checkbox{
            margin-right: 18px;
          }
          .el-checkbox__inner{
            width: 18px;
            height: 18px;
          }
          .el-checkbox__inner::after{
            border: 2px solid #FFF;
            border-left: 0;
            border-top: 0;
            height: 9px;
            left: 5px;
            top: 1px;
            width: 4px;
          }
          .el-checkbox__label{
            padding-left: 6px;
          }
          .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
            background: #FC612A;
            border: 1px solid #FC612A;
          }
          .el-checkbox__input.is-focus .el-checkbox__inner{
            border-color :#FC612A;
          }
          .el-checkbox__inner:hover{
            border-color :#FC612A;
          }
          .el-checkbox__input.is-checked+.el-checkbox__label{
            color: #262626;
          }
    }
    .navList {
      .datePickerUser{
        position: relative;
        top: 9px;
        .el-date-editor {
          position: relative;
        }
        .el-date-editor .el-range__icon{
          color: #409EFF;
          line-height: 17px;
          position: absolute;
          right: 10px;
        }
        .el-date-editor .el-range-separator{
          line-height: 19px;
          color: #777777;
          width: 10px;
          padding: 0;
        }
        .el-date-editor .el-range-input{
          color: #777777;
          width: 88px;
        }
        .el-date-editor .el-range__close-icon{
          line-height: 17px;
          color: #777777;
        }
        .el-input__inner{
          border:none;
          width: 286px;
          height: 26px;
          padding-left: 0;
        }
        ::-webkit-input-placeholder {
          font-size: 14px;
          color: #777777;
        }
        ::-moz-input-placeholder {
          font-size: 14px;
          color: #777777;
        }
        :-ms-input-placeholder {
          font-size: 14px;
          color: #777777;
        }
      }
    }
  }
</style>
<style lang="scss" scoped>
  // .list-container{
  //   min-width: 1080px;
  // }
  .header {
      width: 100%;
      border-radius:4px;
      height: 88px;
      display: flow-root;
      padding-left: 0;
       .list{
          margin-top: 10px;
          margin-bottom: 8px;
          padding-left: 10px;
          >span{
            float: left;
          }
          .el-checkbox-group{
            float: left;
            position: relative;
            top: 4px;
          }
       }
      .navList {
          font-size: 14px;
          color: #262626;
          border-bottom:none;
          padding-left: 10px;
          height: 44px;
          >span{
            margin-right: 6px;
            display: block;
            line-height: 44px;
          }
          .total{
            font-size: 12px;
            color: #777777;
            margin-right: 20px;
          }
      }
  }
  .nav {
    .top {
      padding:20px 0 0px 0;
      box-sizing: border-box;
      .addProject {
        float: left;
        width: 150px;
        height: 40px;
        color: #fff;
        text-align: center; 
        background: #1890ff;
        cursor: pointer;
        border-radius: 4px;
        line-height: 40px;
      }
      span {
        float: left;
        margin-left:30px;
        line-height: 40px;
      }
    }
    .navList {
      padding:0;
      margin:0;
      li {
         border-bottom: 1px solid  #EEEEEE;
         float: left;
         width:100%;
         background: #fff;
         min-width:1180px;      
         cursor: pointer;
         margin-top: 0;
        .table {
            padding: 12px 8px;
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            // align-items: center;
            .tableDiv {
              float: left;
              margin-left:20px;
              font-size: 14px;
              color: #777777;
              height: 40px;
              .miueList {
                height: 20px;
                text-align: center;
                line-height: 20px;
                font-size: 14px;
                color: #fff;
              };
              .upIng{
                color: #FC612A
              }
              .closeStatus{
                color: #8C8C8D
              }
              .BeopenedStatus{
                color: #26A9FF;
              }
            }
            .HeaderImg {
              margin-left:0px;
              line-height: 40px;
              img{
                width: 40px;
                height:40px;
                border-radius: 50%;
                background: #ccc;
              }
              .userName{
                font-size: 16px;
                color: #262626;
                font-weight:bold;
                margin-left:12px;
                max-width: calc(100% - 123px);
                overflow:hidden;
                white-space:nowrap;
                text-overflow:ellipsis;
                display: block;
                height: 40px;
                word-break: break-all;
              }
              .isVip{
                margin-left:14px;
                margin-top:8px;
                background:url(https://cdn.yueyangshuyuan.com/%E4%BC%9A%E5%91%98%E5%BA%95%E8%89%B2.png) no-repeat;
                display:block;
                width:52px;
                height: 24px;
                line-height:24px;
                text-align:center;
                font-size: 12px;
                color: #FFFFFF;
              }
            }
            .HeaderDetail {
              .topList {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 40px;
                 h3 {
                   overflow:hidden;
                    white-space:nowrap;
                    text-overflow:ellipsis;
                    font-size: 14px;
                    color:  #777777;
                    font-weight:normal;
                 }
              }
              .fontDetail {
                max-height:70px;
                text-overflow:ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp:3;
                overflow: hidden;
                color: #777777;
                font-size:12px;
                margin-top:12px;
                line-height: 18px;
              }
            }
            .HeaderOrder{
                text-align: center;
                line-height:40px;
            }
            .HeaderStatus{
              height: 40px;
              line-height:40px;
              text-align: center;
            }
            .HeaderDate {
              position: relative;
              height: 40px;
              line-height:40px;
              text-align: center;
            }
            .HeaderHandle {
              text-align: center;
              line-height:40px;
              .HandleList {
                width:100%;
                text-align: center;
                font-size: 14px;
                color: #4A90E2;
                cursor: pointer;
                margin-bottom:8px;
              }
              .HandleList:hover {
                  opacity: 0.8;
              }
            }
        }
        .font {
          background: #F5F5F7;
          height: 32px;
          line-height: 32px;
          padding-left: 12px;
          p {
            float: left;
            box-sizing: border-box;
            font-size: 12px;
            color: #777777;
            margin-right:20px;
            .blue {
              color: #262626;
              cursor: pointer;
              &:hover{
                opacity: 0.8;
              }
            }
            &:nth-of-type(2){
              float:right;
            }
             &:nth-of-type(3){
              float:right;
            }
          }
          .line{
            float: right;
            display: inline-block;
            width: 1px;
            height: 12px;
            background: #777;
            position: relative;
            top: 10px;
            left: -9px;
          }
        }
      }
      .nodata{
        width: 100%;
        height:200px;
        line-height: 200px;
        text-align:center;
      }
    }
    .pagination {
      margin-top:30px;
      text-align: center;
    }
    .tableHeader {
      padding:0 8px;
      box-sizing: border-box;
      margin:10px 0 0 0;
      min-width:1180px;
      border-bottom: 1px solid #E9E9E9;
      .tableLi {
        float: left;
        margin-right:20px;
        font-size: 12px;
        color: #777777;
        height: 32px;
        line-height: 32px;
        text-align: center;
      }
      .tableHeaderImg{
        text-align: left;
      }
    }
    .tableHeaderImg ,.HeaderImg{
      width: calc(100% - 720px);
      
    }
    .tableHeaderDetail ,.HeaderDetail{
      width:100px;
    }
    .tableHeaderOrder ,.HeaderOrder{
      width:100px;
    }
    .tableHeaderOrder{
      i{
        margin-left: 4px;
      }
    }
    .tableHeaderStatus,.HeaderStatus {
      width:100px;
    }
    .tableHeaderDate ,.HeaderDate{
      width: 150px;
    }
    .tableHeaderHandle,.HeaderHandle {
        width: 100px;
        text-align: center;
    }
  }
</style>